<template>
    <div>
        <el-form
                v-loading="loading"
                element-loading-text="哥正在为你登录中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"

                :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
            <h3 class="loginTitle">系统登陆</h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="loginForm.username" auto-complete="false" placeholder="请输入用户名"></el-input>
            </el-form-item>



            <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" auto-complete="false" placeholder="请输入密码"></el-input>
            </el-form-item>



            <el-form-item prop="code">
                <el-input style="width:200px ; margin-right: 5px" type="text" v-model="loginForm.code" auto-complete="false" placeholder="点击更换图片">
                </el-input>
                <img :src="captchaUrl" @click="updateCaptcha" class="el-form-item__content">
            </el-form-item>
            <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
            <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
        </el-form>

    </div>
</template>

<script>

    export default {
        name: "Login",
        data(){
            return{
                captchaUrl:'/captcha?time='+new Date(),
                loginForm:{
                    username:'admin',
                    password:'123',
                    code:''
                },
                checked:true,
                loading:false,
                rules:{
                    username: [{required:true,message:'请输入用户名',trigger:'blur'}],
                    password: [{required:true,message: '请输入密码',trigger:'blur'}],
                    code: [{required:true,message:'请输入验证码',trigger:'blur'}]
                }
            }
        },
        methods: {
            updateCaptcha(){
              this.captchaUrl='/captcha?time='+new Date();
            },
            submitLogin() {
                this.$refs.loginForm.validate((valid) =>{
                    if (valid) {
                        this.loading=true;
                       this.postRequest('/login',this.loginForm).then(resp=>{
                           if (resp){
                               this.loading=false;
                               const tokenStr=resp.obj.tokenHead+resp.obj.token;
                               //存进去 跳转页面后获取
                               window.sessionStorage.setItem('tokenStr',tokenStr);
                               //跳转
                              /* this.$router.replace('/home');*/
                               /*此处解决自己输入属地址的行为*/
                               let path = this.$route.query.redirect;
                               this.$router.replace((path==='/'||path===undefined)?'/home' : path);
                           }
                           this.loading=false;
                       });
                    } else {
                        this.$message.error('请填写完整!!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
.el-form-item__content{
    display: flex;
    align-items: center
}
    .loginContainer{
    border-radius: 15px;
        background-clip: padding-box;/*背景裁剪到内边框*/
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;/*拉大间隔*/
        background: #fff;
        border: 1px solid #eaeaea;
    }
    .loginTitle{
        margin: 0px auto 40px auto;
        text-align: center;
    }
    .loginRemember{
        text-align: left;
        margin: 0px 0px 15px 0px;
    }

</style>
